<template>
  <div class="app-container">
    <div v-if="isAuthenticated">
      <!-- 头部（单独一行） -->
      <HeaderComponent />
      <!-- 主体内容（头部下方，包含侧边栏和路由视图） -->
        <div class="main-content"> <!-- 主内容区 -->
          <router-view :key="$route.fullPath" />
        </div>
    </div>
    <div v-else>
      <!-- 未登录时显示登录/注册页面 -->
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue'
import { mapState } from 'vuex' // 引入 mapState 辅助函数

export default {
  name: 'App',
  components: {
    HeaderComponent
  },
  computed: {
    // 使用 mapState 从 Vuex 正确获取 userData
    ...mapState(['userData']),
    // 修正认证状态判断逻辑
    isAuthenticated() {
      // 从 userData 中获取 token，同时兼容空值情况
      return !!this.userData?.token
    }
  },
  created() {
    // 监听登录成功事件，同步状态
    this.$root.$on('login-success', () => {
      // 重新获取 Vuex 状态（确保与 localStorage 同步）
      this.$store.dispatch('refreshUserData')
    })
  },
  beforeDestroy() {
    // 移除事件监听，避免内存泄漏
    this.$root.$off('login-success')
  }
}
</script>

<style scoped>
/* 补充布局样式，确保主内容区显示正确 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-wrapper {
  flex: 1; /* 占满剩余高度，使内容区自适应 */
  padding: 20px;
  box-sizing: border-box;
}

.main-content {
  width: 100%;
  max-width: 1200px; /* 可选：限制最大宽度 */
  margin: 0 auto;
}
</style>